<template>
    <div class="re-container">
        <div class="title">咨询投诉</div>
        <van-form @failed="onFailed" @submit="formSubmit">
            <van-cell-group inset>
                <van-field required :rules="[{ required: true, message: '请输入姓名' }]" v-model="formData.name" label="姓名"
                    name="pattern" placeholder="请输入姓名" />
                <van-field required :rules="[{ required: true, message: '请输入联系方式' }]" v-model="formData.phone"
                    label="联系方式" name="pattern" placeholder="请输入联系方式" />
                <van-field required rows="2" type="textarea" :rules="[{ required: true, message: '请输入留言' }]"
                    v-model="formData.ypmc" label="留言" name="pattern" placeholder="请输入留言" />
                <van-field disabled label="" name="pattern" placeholder="" />
            </van-cell-group>
            <div class="btn-wrap">
                <van-button @click="handleCancel" color="#e0dcdcc4" style="width: 100px;" round block
                    native-type="submit">
                    取消
                </van-button>
                <van-button color="#46cf89" style="width: 100px;" round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { getComplaints } from "../../apis/home";
import { useRouter } from 'vue-router'
import { ref } from "vue";
const router = useRouter()
const formData = ref({ name: '', phone: '', liuyan: '' })
const showPicker = ref(false);
const checked = ref(false)

const onFailed = (errorInfo) => {
    console.log('failed', errorInfo);
};

const handleCancel = () => {
    router.push('/home')
}

const formSubmit = () => {
    getComplaints(formData.value).then((res) => {
        if (res.code == 0) {
            showDialog({
                title: '提示',
                message: '提交成功',
            }).then(() => {
                // on close
                router.push('/home')
            });
        } else {
            showDialog({
                title: '提示',
                message: '提交失败，请重试',
            }).then(() => {
            });
        }
    })

}

</script>

<style lang="scss" scoped>
.re-container {
    padding: 20px;

    .title {
        font-size: 20px;
        font-weight: 600;
    }

    .van-form {
        margin-top: 20px;
        color: #e0dcdcc4;
    }

    .btn-wrap {
        padding: 0 50px;
        margin-top: 70px;
        display: flex;
        justify-content: space-around;

    }
}
</style>